import React, {FC} from 'react';
import {Card, Descriptions, Drawer, Spin} from 'antd';
import styles from '@/utils/utils.less'
import {SysOperateLogModel} from '../data';
import service from '../service';
import {DetailsDialogProps} from "@/global";
import useLoad from "@/hooks/useLoad";

/** 系统操作日志详情组件 */
const SysOperateLogDetails: FC<DetailsDialogProps> = props => {
  const {params: {id}, visible, hide} = props;
  const {loading, data: model} = useLoad<SysOperateLogModel>({
    isLoad: Boolean(id),
    onLoad: () => service.selectById(id)
  }, [id]);

  return (
    <Drawer
      title="查看操作日志详细信息"
      width="50%"
      visible={visible}
      onClose={hide}
      className={styles.drawerBodyPadding}>
      <Spin spinning={loading} wrapperClassName={styles.h100p}>
        {model && (<Card bordered={false} className={styles.cardBodyDesc}>
          <Descriptions column={1} bordered={true} size="small" className={styles.detailsDescriptions}>
            <Descriptions.Item label="所属模块">{model.tag}</Descriptions.Item>
            <Descriptions.Item label="操作信息">{model.msg}</Descriptions.Item>
            <Descriptions.Item label="操作消息">{model.method}</Descriptions.Item>
            <Descriptions.Item label="请求方法">{model.reqMethod}</Descriptions.Item>
            <Descriptions.Item label="请求地址">{model.reqUrl}</Descriptions.Item>
            <Descriptions.Item label="执行耗时">{model.costTimeName}</Descriptions.Item>
            {model.executeParam && <Descriptions.Item label="方法参数">
              <pre>{model.executeParam}</pre>
            </Descriptions.Item>}
            {model.executeResult && <Descriptions.Item label="执行结果">
              <pre>{model.executeResult}</pre>
            </Descriptions.Item>}
            <Descriptions.Item label="所属应用ID">{model.appId}</Descriptions.Item>
            <Descriptions.Item label="所属应用名称">{model.appName}</Descriptions.Item>
            <Descriptions.Item label="操作IP">{model.ip}</Descriptions.Item>
            <Descriptions.Item label="操作人员">{model.operateUserName}</Descriptions.Item>
            <Descriptions.Item label="操作时间">{model.operateDateTime}</Descriptions.Item>
            <Descriptions.Item label="浏览器标识">{model.userAgent}</Descriptions.Item>
          </Descriptions>
        </Card>)}
      </Spin>
    </Drawer>
  );
};

export default SysOperateLogDetails;
